<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>课程管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/js/jquery-3.7.1.min.js"></script>
    <style>
        .queryBox{
            display: flex;
            margin: 10px 0;
            border-radius: 10px;
            border: solid 1px #aaaaaa;
            padding: 10px;
        }

        /* 全局样式 */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4; /* 背景颜色 */
            margin: 0;
            padding: 20px;
        }

        /* 容器样式 */
        .container {
            max-width: 1200px; /* 最大宽度 */
            margin: 0 auto; /* 居中显示 */
            display: flex;
            flex-direction: column;
            gap: 20px; /* 两个 div 之间的间距 */
        }

        /* 课程介绍文本样式 */
        .course-intro {
            max-height: 500px;
            background-color: #ffffff; /* 白色背景 */
            border: 1px solid #ddd; /* 轻微的边框 */
            border-radius: 8px; /* 圆角边框 */
            padding: 20px; /* 内边距 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */
            font-size: 18px; /* 字体大小 */
            line-height: 1.6; /* 行高 */
            letter-spacing: 2px; /* 字间距 */
            text-align: center; /* 居中对齐 */
            transition: transform 0.3s ease-in-out; /* 鼠标悬停时的动画效果 */
        }

        .course-intro:hover {
            transform: scale(1.02); /* 鼠标悬停时稍微放大 */
        }

        /* 课程和树形结构样式 */
        #course-class-tree {
            background-color: #ffffff; /* 白色背景 */
            border: 1px solid #ddd; /* 轻微的边框 */
            border-radius: 8px; /* 圆角边框 */
            padding: 20px; /* 内边距 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */
            overflow-y: auto; /* 如果内容过多，添加垂直滚动条 */
            max-height: 400px; /* 设置最大高度，防止内容过长 */
            font-size: 16px; /* 字体大小 */
            line-height: 1.5; /* 行高 */
        }

        /* 标题样式 */
        #course-class-tree h3 {
            margin-top: 0;
            font-size: 20px;
            color: #333; /* 深灰色 */
            border-bottom: 1px solid #ddd; /* 下划线 */
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        /* 列表项样式 */
        #course-class-tree ul {
            list-style-type: none; /* 去掉默认的项目符号 */
            padding: 0;
            margin: 0;
        }

        #course-class-tree li {
            padding: 10px;
            border-bottom: 1px solid #eee; /* 分隔线 */
            cursor: pointer; /* 鼠标悬停时显示指针 */
            transition: background-color 0.3s ease-in-out; /* 鼠标悬停时的动画效果 */
        }

        #course-class-tree li:hover {
            background-color: #f9f9f9; /* 鼠标悬停时的背景颜色 */
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .course-intro, #course-class-tree {
                font-size: 16px; /* 在小屏幕上减小字体大小 */
                padding: 15px; /* 减少内边距 */
            }
        }
    </style>


</head>

<body>
<div style="padding: 16px;">
    <div class="layui-col-md12" >
        <div class="layui-card">
            <h1  style="color: black;font-size: 16px;padding: 20px">课程信息管理</h1>
            <div class="queryBox">
                <form   class="layui-form" id="queryForm4Course" >
                    <ul class="query-inline" style="display: flex">
<!--                        <li class="layui-input-group">-->
<!--                            <div class="layui-input-prefix" style="font-size: 14px">-->
<!--                                课程编号-->
<!--                            </div>-->
<!--                            <input type="text" placeholder="请输入课程编号" class="layui-input" name="courseId">-->
<!--                        </li>-->
                        <li class="layui-input-group">
                            <div class="layui-input-prefix" style="font-size: 14px">
                                名称
                            </div>
                            <input type="text" class="layui-input" name="courseNameFuzzy">
                        </li>

<!--                        <li class="layui-input-group">-->

<!--                            <div style="width: 100%;">-->
<!--                                <select  name="teachMethod">-->
<!--                                    <option value="">请选择上课方式</option>-->
<!--                                    <option value="1">线上<option>-->
<!--                                    <option value="2">线下</option>-->
<!--                                </select>-->
<!--                            </div>-->
<!--                        </li>-->
                        <li class="layui-input-group">
                            <div class="layui-input-prefix" style="font-size: 14px">
                                上课教师
                            </div>
                            <input type="text" class="layui-input" name="teacherNameFuzzy">
                        </li>
                        <li class="layui-input-group">
                            <div class="layui-input-prefix" style="font-size: 14px">
                                课程时间
                            </div>
                            <input type="text" class="layui-input" name="teacherId">
                        </li>

                        <li class="layui-input-group">
                            <button type="button" class="layui-btn lay-btn-sm layui-btn-normal "
                                    onclick="search4Course()" style="margin-left: 10px">
                                查询
                            </button>
                        </li>
                        <li class="layui-input-group">
                            <button type="button"  class="layui-btn layui-bg-red"
                                    onclick="showCourseEdit('add','')" style="margin-left: 10px">
                                新增
                            </button>
                        </li>

                    </ul>
<!--                    <ul class="query-inline" style="display: flex;margin-top: 10px">-->
<!--                        -->
<!--&lt;!&ndash;                        <li class="layui-input-group">&ndash;&gt;-->
<!--&lt;!&ndash;                            <div class="layui-input-prefix" style="font-size: 14px">&ndash;&gt;-->
<!--&lt;!&ndash;                                考核方式&ndash;&gt;-->
<!--&lt;!&ndash;                            </div>&ndash;&gt;-->
<!--&lt;!&ndash;                            <input type="text" placeholder="支持模糊查询" class="layui-input" name="assesMethod">&ndash;&gt;-->
<!--&lt;!&ndash;                        </li>&ndash;&gt;-->

<!--                        <li class="layui-input-group">-->
<!--                            <button type="button" class="layui-btn lay-btn-sm layui-btn-normal "-->
<!--                                    onclick="search4Course()" style="margin-left: 10px">-->
<!--                                查询-->
<!--                            </button>-->
<!--                        </li>-->
<!--                        <li class="layui-input-group">-->
<!--                            <button type="button"  class="layui-btn layui-bg-red"-->
<!--                                    onclick="showCourseEdit('add','')" style="margin-left: 10px">-->
<!--                                新增-->
<!--                            </button>-->
<!--                        </li>-->
<!--                    </ul>-->
                </form>
            </div>
            <div class="layui-card-body">
                <table class="layui-hide" id="courseList" lay-filter="courseList"></table>
            </div>
        </div>
    </div>
<!-- -->
    <div class="editCourse" id="editCourse" style="display: none;margin: 10px ">
        <form  class="layui-form layui-form-pane" id="editCourseForm" >
<!--            <div class="layui-col-md3">-->
<!--                    <div class="layui-card">-->
<!--                        <div style="width: 94%;margin-left: 3%">-->
<!--                            <h1  style="color: black;font-size: 16px;padding: 20px">课程介绍</h1>-->
<!--                            <div class="course-intro" id="courseIntro">-->
<!--                                选择课程，点击信息，即可查看-->
<!--                            </div>-->
<!--                            <h1  style="color: black;font-size: 16px;padding: 20px">课程和信息</h1>-->
<!--                            <div class="course-intro">-->
<!--                                选择课程，点击信息，即可查看-->
<!--                                <div style="margin: 20px">-->
<!--                                    <button type="button" class="layui-btn layui-btn-sm" lay-on="saveClass4Course">保存</button>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div id="course-class-tree"></div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
                        <div class="layui-form-item">
                            <input type="hidden" name="courseId">
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">教师学工号</label>
                            <div class="layui-input-block">
                                <input type="text" name="teacherId" autocomplete="off" placeholder="请输入教师学工号" lay-verify="required|noSpace" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">教师姓名</label>
                            <div class="layui-input-block">
                                <input type="text" name="teacherName" autocomplete="off" placeholder="请输入教师姓名" lay-verify="required|noSpace" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">课程名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="courseName" autocomplete="off" placeholder="请输入课程名称" lay-verify="required|noSpace" class="layui-input">
                            </div>
                        </div>

                       <div class="layui-form-item">
                           <label class="layui-form-label">上课日期</label>
                           <div class="layui-inline" id="ID-startdate-enddate">
                               <div class="layui-input-inline">
                                   <input type="text" name="startTime" autocomplete="off" id="ID-startdate" class="layui-input" placeholder="开始日期">
                               </div>
                               <div class="layui-form-mid">-</div>
                               <div class="layui-input-inline">
                                   <input type="text" name="endTime"  autocomplete="off" id="ID-enddate" class="layui-input" placeholder="结束日期">
                               </div>
                           </div>
                       </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">上课地点</label>
                            <div class="layui-input-block">
                                <input type="text" name="classRoom" autocomplete="off" placeholder="请输入上课地点或平台链接" lay-verify="required|noSpace" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上课人数</label>
                            <div class="layui-input-block">
                                <input type="text" name="maxEnrollment" autocomplete="off" placeholder="请输入上课人数" lay-verify="required|noSpace|positiveInteger" class="layui-input">
                            </div>
                        </div>
<!--                      <div class="layui-form-item">-->
<!--                <label class="layui-form-label">教学方式</label>-->
<!--                <input type="radio" name="teachMethod" value="1" title="线上" checked>-->
<!--                <input type="radio" name="teachMethod" value="2" title="线下" >-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">考核方式</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="assesMethod" autocomplete="off" placeholder="请输入考核方式" lay-verify="required|noSpace" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">课程介绍</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="description" lay-verify="noSpace" autocomplete="off" placeholder="请输入课程介绍"  class="layui-textarea">-->
<!--                </div>-->
<!--            </div>-->
            <div class="layui-form-item">
                <button class="layui-btn" lay-submit lay-filter="submit4Course">确认</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>
</div>

<script type="text/html" id="courseTemplate">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">
            编辑
        </a>
        <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="del">
            删除
        </a>
<!--        <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="getClass4Course">-->
<!--            信息-->
<!--        </a>-->
    </div>
</script>

<script type="text/javascript">
    // 关闭弹出层
    const  closeeditCourseDialog=()=> {
        if (layerIndex !== undefined) {
            layer.close(layerIndex);
            layerIndex = undefined; // 重置索引值
        }
    }

    // 获取查询输入值
    function getsearch4CourseCondition() {
        let formData={};
        // 遍历输入元素，将值存储到formData中
        $("#queryForm4Course").find('input',"select").each(function () {
            let name=$(this).attr('name'); // 获取元素的 name属性
            let type = $(this).attr('type'); // 获取元素的类型
            if (name) {
                if (type === 'radio') {
                    // 对于单选按钮，只有当它是选中状态时才添加到formData
                    if ($(this).is(':checked')) {
                        formData[name] = $(this).val(); // 获取选中单选按钮的值
                    }
                } else {
                    // 对于其他类型的输入元素，只要值不为空就添加到formData
                    let value = $(this).val();
                    if (value) {
                        formData[name] = value;
                    }
                }
            }
        });
        return formData;
    }

    function search4Course(){
        let queryData=getsearch4CourseCondition();
        console.log(queryData);

        const table=layui.table;
        table.reloadData("courseList",{
            where:{data:queryData}
        });
        console.log("where condition:"+JSON.stringify(queryData));
    }

    // 删除数据
    const delData=()=>{
        layui.use(['layer','popup' ], function() {
            let layer = layui.layer;
            let popup=layui.popup;
            let table=layui.table;
            let checkStatus = table.checkStatus("courseList"); // teacher 表格id  或者filter id
            if(checkStatus.data.length!==1){
                popup.warning("请选择要一条删除的信息");
                return;
            }
            let ids = checkStatus.data.map(item=>item.courseId).join(",");
            layer.confirm("确定要删除吗", {icon: 3}, function(index){
                let request = $.ajax({
                    url: "/course/delCourse?courseId="+ids,
                    method: "POST",
                });
                request.done(function( res ) {
                    if(res.code===200){
                        popup.success(res.info);
                    }else{
                        popup.warning(res.info);
                    }
                    layer.close(index);
                    // 重新加载数据
                    search4Course()
                });
                request.fail(function( jqXHR, textStatus ) {
                    console.error(jqXHR,textStatus);
                });
            }, function(index){
                layer.msg("取消成功", {icon: 1});
                layer.close(index);
            });
        });
    }

    const submitForm=(form,popup)=>{
        // 自定义验证规则
        form.verify({
            positiveInteger: function(value){
                if(!/^\d+$/.test(value)){
                    return '请输入正整数';
                }
            }
        });
        // 提交事件
        form.on('submit(submit4Course)', function(data){
            var field = data.field; // 获取表单字段值
            var request = $.ajax({
                url: "/course/saveCourseInfo",
                method: "POST",
                data: field,
                dataType: "json"
            });
            request.done(function( data ) {
                if(data.code===200){
                    popup.success(data.info);
                    closeeditCourseDialog();
                    search4Course();
                }else {
                    popup.warning(data.info);
                }
            });
            request.fail(function( jqXHR, textStatus ) {
                popup.warning(data.info);
                console.error(jqXHR,textStatus);
            });
            return false; // 阻止默认 form 跳转
        });
    }


    // layui use
    layui.use(['admin','jquery','popup','table','form','tree'], function() {
        let popup = layui.popup;
        let $ = layui.jquery;
        let table=layui.table;
        let form = layui.form;
        var layer = layui.layer;
        var tree = layui.tree;
        var util = layui.util;
        var laydate = layui.laydate;


        // 1.校验表单是否合法
        submitForm(form,popup);

        showCourseEdit = (type, data) => {
            // 重置表单
            const resetForm = () => {
                $("#editCourse").find('input, select').each(function () {
                    $(this).val(''); // 清空输入框和选择框的值
                    if (this.type === 'checkbox' || this.type === 'radio') {
                        this.checked = false; // 重置复选框和单选按钮
                    }
                });
            };

            //  填充数据
            const fillFormData = (formData) => {
                Object.keys(formData).forEach(key => {
                    // 使用 jQuery 的 $() 来选择 DOM 元素
                    const elements = $(`#editCourseForm [name="${key}"]`);

                    if (elements.length === 0) {
                        return;
                    }

                    elements.each(function () {
                        const element = $(this);
                        const type = element.attr('type');
                        const tagName = element.prop('tagName').toLowerCase();

                        if (type === 'radio') {
                            // 对于单选按钮，找到与 formData[key] 匹配的值并设置为 checked
                            if (element.val() == formData[key]) {
                                element.prop('checked', true);
                            }
                        } else if (type === 'checkbox') {
                            // 对于复选框，根据 formData[key] 设置 checked 属性
                            if (Array.isArray(formData[key])) {
                                element.prop('checked', formData[key].includes(element.val()));
                            } else {
                                element.prop('checked', formData[key] === element.val());
                            }
                        } else if (tagName === 'select') {
                            if (element.prop('multiple')) {
                                // 对于多选 select，遍历所有选项并根据数据设置 selected 属性
                                const values = Array.isArray(formData[key]) ? formData[key] : [formData[key]];
                                element.find('option').each(function () {
                                    $(this).prop('selected', values.includes($(this).val()));
                                });
                            } else {
                                // 对于单选 select，直接设置 value 即可
                                element.val(formData[key] || '');
                            }
                            // 重新渲染 select 组件
                            layui.form.render('select');
                        } else {
                            // 对于其他类型的输入元素，直接设置 value
                            element.val(formData[key]);
                        }
                    });
                });

                // 重新渲染整个表单，确保所有组件更新
                form.render();
            };



            if (type === 'add') {
                console.log("点击新增");
                resetForm();
                layerIndex = layer.open({
                    type: 1,
                    title: "新增信息",
                    area: ['600px', 'auto'],
                    shade: false,  // 禁用遮罩层
                    content: $("#editCourse"),
                    success: function(layero, index) {
                        // 确保表单元素可见后再调用 form.render()
                        setTimeout(() => {
                            form.render();
                        }, 0);
                    }
                });
            } else {
                layerIndex = layer.open({
                    type: 1,
                    title: "修改信息",
                    shade: false,  // 禁用遮罩层
                    area: ['580px', 'auto'],
                    content: $("#editCourse"), // 直接传递 DOM 元素
                    success: function(layero, index) {

                        // 将初始数据应用到表单字段中
                        if (data) {
                            fillFormData(data);
                        }
                        // 确保表单元素可见后再调用 form.render()
                        setTimeout(() => {
                            form.render();
                        }, 0);

                        console.log('弹出层已打开');
                    }
                });
            }
        };

        // 日期范围 - 左右面板联动选择模式
        laydate.render({
            elem: '#ID-startdate-enddate',
            range: ['#ID-startdate', '#ID-enddate'],
            rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
        });

        // 1. 获取数据
        $(document).ready(function () {

            let cols4courseList = [
                { type: 'checkbox', fixed: 'left' },
                { field: 'courseId', fixed: 'left',  title: '课程编号'},
                { field: 'courseName', fixed: 'left', title: '课程名称'},
                { field: 'teacherName', fixed: 'left', title: '教师名称'},
                { field: 'startTime', fixed: 'left', title: '开始时间'},
                { field: 'endTime', fixed: 'left', title: '结束时间'},
                { field: 'classRoom', fixed: 'left', title: '上课地点'},
                // { field: 'teachMethod', fixed: 'left', title: '上课方式',
                //     templet: d=> d.teachMethod===1? '线上':(d.teachMethod===2?'线下':'未知')},
                // { field: 'assesMethod', fixed: 'left', title: '考核方式'},
                { field: 'maxEnrollment', fixed: 'left', title: '人数'},
                { fixed: 'right', title: '操作', width: 140, minWidth: 125, toolbar: '#courseTemplate' }
            ];
            let queryData = getsearch4CourseCondition();
            // 表格相关事件
            table.render({
                elem: '#courseList',
                url: '/course/loadCourseList',
                cols: [cols4courseList],
                method:"post",
                page: true,
                contentType:'application/json',
                where:{'data':queryData},
                limits: [10, 20, 30, 40, 50],
                limit: 10,
                height: 'full-220'
            });
            // 点击编辑事件
            table.on('tool(courseList)',async function (obj) {
                var  data=obj.data;
                if (obj.event ==='edit'){
                    showCourseEdit('edit',data);
                }else if (obj.event==='del'){
                    delData();
                }else if(obj.event==="getClass4Course"){
                    handleCourseData(obj,popup,treeInstance4Course);
                }
            })
        });
        // 模拟数据
        var treeData = [
            {title:'课程名称',id:1,children:[{title:'名称',id:1000}]}];

        var data = [
            {title:'A-1',id:1,field:'name1',checked:true,spread:true, // 学院
             children:[//专业
                    {title:'B-1-1 可允许跳转',id:3,field:'name11',href:'',spread:true,
                        children:[{title:'C-1-1-3',id:23,field:''}, //班级信息
                                  {title:'C-1-1-1',id:7,field:''},
                                  {title:'C-1-1-2',id:8,field:''}]},
                    {title:'B-1-2',id:4,spread:true,
                        children:[{title:'C-1-2-1',id:9,field:''},
                                  {title:'C-1-2-2',id:10,field:''}]},
                    {title:'B-1-3',id:20,field:'',
                        children:[{title:'C-1-3-1',id:21,field:''},
                                  {title:'C-1-3-2',id:22,field:''}]}]},
            {title:'A-2',id:2,field:'',spread:true,
                children:[
                    {title:'B-2-1',id:5,field:'',spread:true,
                        children:[{title:'C-2-1-1',id:11,field:''},
                                  {title:'C-2-1-2',id:12,field:''}]},
                                  {title:'B-2-2',id:6,field:''}]},
            {title:'A-3',id:16,field:'',spread:true,
                children:[{title:'B-3-1',id:17,field:'',fixed:true,
                    children:[{title:'C-3-1-1',id:18,field:''},
                              {title:'C-3-1-2',id:19,field:''}]},
                              {title:'B-3-2',id:27,field:''}]}
        ];


        // 树组件实例
        let  treeInstance4Course;
        loadAllDeptInfoDetail(popup,function (res){
            data=processData(res,[]);
            // 渲染
            treeInstance4Course = tree.render({
                elem: '#course-class-tree',
                data: data,
                showCheckbox: true,  // 是否显示复选框
                onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                id: 'course-class-tree',
                checkStrictly: true,  // 禁止父子节点关联
                isJump: true, // 是否允许点击节点时弹出新窗口跳转
                click: function(obj){
                    var data = obj.data;  //获取当前点击的节点数据
                    layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
                }
            });
            console.log(treeInstance4Course.config);  // 打印配置项
        });


        // 递归函数用于遍历树结构并收集符合条件的节点
        function collectClassNodes(nodes) {
            return nodes.reduce((acc, node) => {
                // 如果当前节点是班级并且被选中，则添加到结果列表
                if (!node.isParent && node.checked) {
                    acc.push(node);
                }
                // 如果当前节点有子节点且展开，则递归处理子节点
                if (node.children && node.spread) {
                    acc.push(...collectClassNodes(node.children));
                }
                return acc;
            }, []);
        }


        // 按钮事件
        util.event('lay-on', {
            saveClass4Course: function(othis){
                // 获取table
                var checkStatus = table.checkStatus('courseList');
                if (checkStatus.data.length!==1){
                    popup.warning("请选择一门课程，并为其分配班级信息");
                    return;
                }
                let courseId = checkStatus.data.map(item=>item.courseId).join(",");
                // 获取所有选中的节点
                var checkedNodes  = treeInstance4Course.getChecked(); // 获取选中节点的数据 参数是Id值
                console.log("分配班级："+JSON.stringify(checkedNodes));

                // 收集所有选中的班级节点
                const classNodes = collectClassNodes(checkedNodes);


                // 提取 id 并去掉 'c' 字母
                const classIds = classNodes.map(node => {
                    let id = String(node.id);  // 确保 id 是字符串类型
                    if (id.toLowerCase().startsWith('c')) {
                        id = id.slice(1);  // 去掉第一个字符 'c'
                    }
                    return id;
                });

                // 拼接成逗号分隔的字符串
                const classIdsString = classIds.join(',');
                let classIdArray = classIdsString.split(',').map(id => parseInt(id, 10));
                console.log(typeof classIds)
                console.log("提交参数===》 courseId:"+courseId+","+"classIdArray:"+classIdArray);
                // 保存班级信息表
                let request = $.ajax({
                    url: "/course/saveCourseClassInfo",
                    data:{
                        courseId:courseId,
                        classIds:classIdArray
                    },
                    traditional: true, // 确保数组正确序列化
                    dataType:"json",
                    method: "POST",
                });
                request.done(function( data ) {
                    if(data.code===901){ // 登录超时
                        popup.warning(data.info, function () {
                            console.log(data.info);
                        });
                        setTimeout(function () {
                            location.href = "/login";
                        }, 1500);
                    }else{ popup.warning(data.info, function () {
                        console.log(data.info);
                    });

                    }
                });

                request.fail(function( jqXHR, textStatus ) {
                    console.error(jqXHR,textStatus);
                });

            },
        });
    } );

    const loadAllDeptInfoDetail=(popup,callback)=>{
        let request = $.ajax({
            url: "/dept/loadAllDeptInfoDetail",
            method: "GET",
            dataType: "json"
        });
        request.done(function( data ) {
            if(data.code===901){ // 登录超时
                popup.warning(data.info, function () {
                    console.log(data.info);
                });
                setTimeout(function () {
                    location.href = "/login";
                }, 1500);
            }else {
                // 调用回调函数并传递数据
                if (typeof callback === 'function') {
                    callback(data.data);
                }
            }
        });

        request.fail(function( jqXHR, textStatus ) {
            console.error(jqXHR,textStatus);
        });
    }


    const  getClass4Course=(courseId,popup,callback)=>{
        let request = $.ajax({
            url: "/course/loadClassInfo?courseId="+courseId,
            method: "GET",
            dataType: "json"
        });
        request.done(function( data ) {
            if(data.code===901){ // 登录超时
                popup.warning(data.info, function () {
                    console.log(data.info);
                });
                setTimeout(function () {
                    location.href = "/login";
                }, 1500);
            }else {
                // 调用回调函数并传递数据
                if (typeof callback === 'function') {
                    callback(data.data);
                }
            }
        });

        request.fail(function( jqXHR, textStatus ) {
            console.error(jqXHR,textStatus);
        });
    }


    const processData = (res, checkedClassIds = []) => {
        if (!res || !Array.isArray(res)) {
            return [];
        }

        return res.map(department => {
            // 处理学院信息
            const departmentItem = {
                title: department.departmentName, // 设置title
                id: "a"+department.departmentId, // 设置id
                checked:false,
                spread: true, // 默认展开
                isParent: true,  // 学院有子节点
                children: [] // 用于存储专业信息
            };

            // 处理专业信息
            if (department.majorInfoList && Array.isArray(department.majorInfoList)) {
                departmentItem.children = department.majorInfoList.map(major => {
                    if (!major) {
                        return null;
                    }
                    const majorItem = {
                        title: major.majorName, // 设置专业名称
                        checked:false,
                        spread: true, // 默认展开
                        id:"b"+ major.majorId, // 设置专业ID
                        isParent: true,  // 专业有子节点
                        children: [] // 用于存储班级信息
                    };

                    // 处理班级信息
                    if (major.classInfoList && Array.isArray(major.classInfoList)) {
                        majorItem.children = major.classInfoList.map(classInfo => {
                            if (!classInfo) {
                                return null;
                            }
                            const classItem = {
                                title: classInfo.className, // 设置班级名称
                                id:"c" + classInfo.classId,
                                isParent: false,  // 班级没有子节点// 设置班级ID
                                checked: checkedClassIds.includes(classInfo.classId) // 根据班级ID是否在checkedClassIds中设置checked属性
                            };

                            return classItem;
                        }).filter(Boolean); // 过滤掉 null 或 undefined
                    }
                    return majorItem;
                }).filter(Boolean); // 过滤掉 null 或 undefined
            }
            return departmentItem;
        });
    };


    // 将 getClass4Course 封装为 Promise
    function getClass4CoursePromise(courseId, popup) {
        return new Promise((resolve, reject) => {
            getClass4Course(courseId, popup, function(res) {
                if (res) {
                    resolve(res);
                } else {
                    reject('getClass4Course failed');
                }
            });
        });
    }

    // 将 loadAllDeptInfoDetail 封装为 Promise
    function loadAllDeptInfoDetailPromise(popup) {
        return new Promise((resolve, reject) => {
            loadAllDeptInfoDetail(popup, function(resData) {
                if (resData) {
                    resolve(resData);
                } else {
                    reject('loadAllDeptInfoDetail failed');
                }
            });
        });
    }
    // 使用 async/await 处理异步操作
    async function handleCourseData(obj,popup,treeInstance4Course) {
        try {
            // 获取课程信息
            const courseRes = await getClass4CoursePromise(obj.data.courseId, popup);

            // 更新课程介绍
            $("#courseIntro").html(courseRes.courseName + ":" + (courseRes.description === null ? "暂无描述" : courseRes.description));

            // 获取部门信息
            const deptRes = await loadAllDeptInfoDetailPromise(popup);

            // 处理数据
            const processedData = processData(deptRes, courseRes.classIds);

            // 清除所有节点的选中状态
            const allCheckedNodes = treeInstance4Course.getChecked();  // 获取所有选中的节点
            allCheckedNodes.forEach(node => {
                treeInstance4Course.setChecked(node.id, false);  // 取消选中
            });

            // 重新加载树组件
            treeInstance4Course.reload({
                data: processedData,
            });

            console.log(processedData);
        } catch (error) {
            console.error('Error handling course data:', error);
        }
    }
</script>
</body>

</html>